<template>
  <van-icon color="#777" :name="value == 1 ? 'good-job' : 'good-job-o'" @click="onLike" />
</template>
<script>
import { addLike, cancelLike } from '@/api/article';
export default {
  name: 'CollectPage',
  components: {},
  props: {
    value: {
      type: Number,
      required: true,
    },
    articleId: {
      required: true,
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    onLike() {
      if (this.value == 1) {
        // 取消点赞
        cancelLike(this.articleId)
          .then((res) => {
            console.log(res);
            // 通知父组件视图更新 v-model默认事件名是input
            this.$emit('input', 0);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 点赞
        addLike(this.articleId)
          .then((res) => {
            console.log(res);
            // 通知父组件视图更新 v-model默认事件名是input
            this.$emit('input', 1);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.$toast(!this.value ? '点赞成功' : '取消点赞');
    },
  },
};
</script>
<style lang='less' scoped>
.van-icon-good-job {
  color: #ffa500 !important;
}
</style>
